<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        img {
            vertical-align: middle;
        }

        .lunbo {
            width: 820px;
            overflow: hidden;
            margin: 0 auto;
            border: 5px solid red;
            position: relative;
        }

        .lunboBox {
            width: 4100px;
            display: flex;
            position: relative;
            left: 0;
            transition: left 0.5s;
        }

        .lunboBox li {
            flex: 1;
        }

        .lunboBox li>img {
            width: 100%;
        }

        .tabList {
            display: flex;
            line-height: 40px;
            background-color: #ccc;
        }

        .tabList li {
            flex: 1;
            text-align: center;
            cursor: pointer;
        }

        .tabList li.current {
            background-color: #fff;
        }

        .btn {
            position: absolute;
            top: 50%;
            padding: 5px 10px;
            border: none;
            color: #666;
            font-size: 24px;
            cursor: pointer;
        }

        .btn:hover {
            opacity: .8;
        }

        .previous {
            left: 20px;
        }

        .next {
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="lunbo">
        <ul class="lunboBox">
            <li><img src="./img/1.jpeg" alt=""></li>
            <li><img src="./img/2.jpeg" alt=""></li>
            <li><img src="./img/3.jpeg" alt=""></li>
            <li><img src="./img/4.jpeg" alt=""></li>
            <li><img src="./img/5.jpeg" alt=""></li>
        </ul>
        <ul class="tabList">
            <li class="tabItem current">选项1</li>
            <li class="tabItem">选项2</li>
            <li class="tabItem">选项3</li>
            <li class="tabItem">选项4</li>
            <li class="tabItem">选项5</li>
        </ul>
        <input type="button" value="&lt;" class="btn previous">
        <input type="button" value="&gt;" class="btn next">
    </div>
    <script>
        // 定义 Carousel 类
        class Carousel {
            // 构造函数，初始化轮播图元素和状态
            constructor(element) {
                this.index = 0; // 当前图片索引
                this.box = element; // 轮播图容器
                this.lunboBox = this.box.querySelector('.lunboBox'); // 图片列表容器
                this.tabItems = this.box.querySelectorAll('.tabItem'); // 选项卡列表
                this.previous = this.box.querySelector('.previous'); // 上一张按钮
                this.next = this.box.querySelector('.next'); // 下一张按钮
                this.timer = null; // 自动轮播定时器

                this.init(); // 初始化轮播图
            }

            // 初始化轮播图
            init() {
                this.startAutoSlide(); // 启动自动轮播
                this.addEventListeners(); // 添加事件监听器
            }

            // 启动自动轮播
            startAutoSlide() {
                // 每隔1.5秒切换到下一张图片
                this.timer = setInterval(() => this.moveNext(), 1500);
                // 鼠标移入时停止自动轮播
                this.box.addEventListener('mouseenter', () => clearInterval(this.timer));
                // 鼠标移出时重新启动自动轮播
                this.box.addEventListener('mouseleave', () => {
                    clearInterval(this.timer);
                    this.timer = setInterval(() => this.moveNext(), 1500);
                });
            }

            // 添加事件监听器
            addEventListeners() {
                // 上一张按钮点击事件
                this.previous.addEventListener('click', () => this.movePrevious());
                // 下一张按钮点击事件
                this.next.addEventListener('click', () => this.moveNext());
                // 选项卡点击事件
                this.tabItems.forEach((item, i) => {
                    item.addEventListener('click', () => {
                        this.index = i; // 更新当前索引
                        this.updateCarousel(); // 更新轮播图
                    });
                });
            }

            // 切换到下一张图片
            moveNext() {
                this.index = (this.index + 1) % this.tabItems.length; // 更新索引
                this.updateCarousel(); // 更新轮播图
            }

            // 切换到上一张图片
            movePrevious() {
                this.index = (this.index - 1 + this.tabItems.length) % this.tabItems.length; // 更新索引
                this.updateCarousel(); // 更新轮播图
            }

            // 更新轮播图显示
            updateCarousel() {
                // 更新图片列表位置
                this.lunboBox.style.left = -820 * this.index + 'px';
                // 更新选项卡高亮状态
                this.tabItems.forEach(item => item.classList.remove('current'));
                this.tabItems[this.index].classList.add('current');
            }
        }

        // DOM内容加载完成后初始化轮播图
        document.addEventListener('DOMContentLoaded', () => {
            const carouselElement = document.querySelector('.lunbo'); // 获取轮播图容器
            new Carousel(carouselElement); // 创建 Carousel 实例
        });
    </script>
</body>

</html>